<template>
	<div class="food" v-show="isShow">
		<transition>
			<div class="food-content" v-show="isShow">
				<div class="image-header">
					<img
						:src="food.image"
					/>
					<p class="foodpanel-desc">{{food.info}}</p>
					<div class="back" @click="toggleShow">
						<i class="iconfont iconleft"></i>
					</div>
				</div>
				<div class="content">
					<h1 class="title">{{food.name}}</h1>
					<div class="detail">
						<span class="sell-count">月售 {{food.sellCount}} 份</span>
						<span class="rating">好评率 {{food.rating}}%</span>
					</div>
					<div class="price">
						<span class="now">￥{{food.price}}</span>
						<span class="old" v-show="food.oldPrice">￥{{food.oldPrice}}</span>
					</div>
					<div class="cartcontrol-wrapper">
						<CartControl :food="food"/>
					</div>
				</div>
			</div>
		</transition>
		<div class="food-cover" @click="toggleShow"></div>
	</div>
</template>

<script>

import CartControl from '../../components/CartControl/CartControl.vue'

export default {
  props: {
    food: Object
  },
  data() {
    return {
      isShow: false
    };
  },

  components: {
    CartControl
  },

  methods: {
    toggleShow() {
      this.isShow = !this.isShow;
    }
  }
};
</script>
<style lang="stylus" rel="stylesheet/stylus" scoped>
@import '../../common/stylus/mixins.styl'

.food
	position fixed
	left 0
	top 0
	bottom 48px
	z-index 101
	width 100%
	.food-content
		position absolute
		left 50%
		top 50%
		transform translate(-50%, -50%)
		width 80%
		height 65%
		z-index 66
		background #fff
		border-radius 5px
		&.v-enter-active, &.v-leave-active
			transition opacity 0.5s
		&.v-enter, &.v-leave-to
			opacity 0
		.image-header
			position relative
			width 100%
			height 0
			padding-top 100%
			img
				position absolute
				top 0
				left 0
				width 100%
				height 100%
			.foodpanel-desc
				font-size 10px
				color #ddd
				letter-spacing 0
				position absolute
				bottom 0
				left 0
				right 0
				padding 0 10px 10px
			.back
				position absolute
				top 10px
				left 0
				.icon-arrow_left
					display block
					padding 10px
					font-size 20px
					color #fff
		.content
			position relative
			padding 18px
			.title
				line-height 14px
				margin-bottom 8px
				font-size 14px
				font-weight 700
				color rgb(7, 17, 27)
			.detail
				margin-bottom 18px
				line-height 10px
				height 10px
				font-size 0
				.sell-count, .rating
					font-size 10px
					color rgb(147, 153, 159)
				.sell-count
					margin-right 12px
			.price
				font-weight 700
				line-height 24px
				.now
					margin-right 8px
					font-size 14px
					color rgb(240, 20, 20)
				.old
					text-decoration line-through
					font-size 10px
					color rgb(147, 153, 159)
			.cartcontrol-wrapper
				position absolute
				right 12px
				bottom 12px
			.buy
				position absolute
				right 18px
				bottom 18px
				z-index 10
				height 24px
				line-height 24px
				padding 0 12px
				box-sizing border-box
				border-radius 12px
				font-size 10px
				color #fff
				background rgb(0, 160, 220)
				&.fade-transition
					transition all 0.2s
					opacity 1
				&.fade-enter, &.fade-leave
					opacity 0
	.food-cover
		position absolute
		top 0
		right 0
		bottom -48px
		left 0
		z-index 55
		background-color rgba(0, 0, 0, 0.5)
</style>
